<template>
    <div class="period-picker">
        <div class="display-flex justify-center align-center period-picker-select">
            <div class="date start-date font-666666" @click="selectStartDate">
                <span v-if="props.date1">{{ props.date1 }}</span>
                <span v-else>开始日期</span>
            </div>
            <span class="font-666666">至</span>
            <div class="date end-date font-666666" @click="selectEndDate">
                <span v-if="props.date2">{{ props.date2}}</span>
                <span v-else>截止日期</span>
            </div>
        </div>
        <van-popup v-model:show="date1Show" position="bottom" class="period-picker-content">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择开始日期"
                @confirm="startDateConfirm"
            />
        </van-popup>
        <van-popup v-model:show="date2Show" position="bottom" class="period-picker-content">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择截止日期"
                @confirm="endDateConfirm"
            />
        </van-popup>
    </div>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import type { Ref } from 'vue'
    import { formatDate, getDaysBetween } from '@/utils/util'
    import { msgError } from '@/utils/message'

    const props = defineProps<{
        date1?: string
        date2?: string
    }>()
    const date1Show:Ref<boolean> = ref(false)
    const date2Show:Ref<boolean> = ref(false)
    const currentDate:Ref<Date> = ref(new Date())
    const emit = defineEmits(['selectDate1','selectDate2'])
   
    function selectStartDate() {
        changeStartDateShow()
    }

    function selectEndDate() {
        changeEndDateShow()
    }

    function startDateConfirm(data: string) {

        const startDate:string = formatDate(data)
        const endDate:any = props.date2
        changeStartDateShow()
        if(props.date2 && getDaysBetween(startDate, endDate) === -1)  return msgError('开始日期必须不小于截止日期')
        emit('selectDate1', startDate)
    }

    function endDateConfirm(data: string) {
        const endDate: string = formatDate(data)
        const startDate: any = props.date1
        changeEndDateShow()
        if(props.date1 && getDaysBetween(startDate, endDate) === -1) return msgError('截止日期必须不小于开始日期')
        emit('selectDate2', endDate)
    }

    function changeStartDateShow() {
        date1Show.value = !date1Show.value
    }

    function changeEndDateShow() {
        date2Show.value = !date2Show.value
    }

</script>
<style lang="scss">
    .period-picker {
        width:100%;
        &-select {
            margin-top: 20px;
            .date {
                text-align:center;
                width:194px;
                height:60px;
                line-height: 60px;
                background: #F3F4F7;
                border-radius: 30px;
            }
            .start-date {
                margin-right: 20px;
            } 
            .end-date {
                margin-left: 20px;
            }
        } 
        &-content {
            position:fixed;
            bottom:0;
            left:0 !important;
            right:0;
        }
    }
</style>